<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>欢迎页</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="/css/plugins/toastr/toastr.min.css" rel="stylesheet">
    <link href="/css/animate.css" rel="stylesheet">
    <link href="/css/style.css?v=4.1.0" rel="stylesheet">
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <div class="col-sm-12">
        <div class="ibox">
            <input type="hidden" th:value="${shopCount}" id="shopCount"/>
            <input type="hidden" th:value="${accomCount}" id="accomCount"/>
            <input type="hidden" th:value="${diningCount}" id="diningCount"/>
            <input type="hidden" th:value="${diningAndAccomCount}" id="diningAndAccomCount"/>

           <input type="hidden" th:value="${accomsResult}" id="accomsResult"/>
           <input type="hidden" th:value="${diningResult}" id="diningResult"/>
           <input type="hidden" th:value="${accomAndDiningResult}" id="accomAndDiningResult"/>

            <div>
                <div id="first-page-chart" style="width: 52%;height:550px; float: left; margin-left: 0px" ></div>
                <div id="first-line-chart" style="width: 48%;height:550px; float: right;margin-right: 0px"></div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="/js/jquery.min.js"></script>
<script src="/js/plugins/layer/layer.min.js"></script>
<script src="/js/openTab.js"></script>
<script src="/js/echarts.min.js"></script>
<script src="/js/echarts-liquidfill.min.js"></script>
<script>
    $(function () {
        var myChart = echarts.init(document.getElementById('first-page-chart'));

        var  shopCount =$("#shopCount").val();
        var  accomCount =$("#accomCount").val();
        var  diningCount =$("#diningCount").val();
        var  diningAndAccomCount =$("#diningAndAccomCount").val();

        var option =  {
            title: {
                text: '       全部农家: ' + shopCount,
                subtext: '',
                left: ''
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                // orient: 'vertical',
                // top: 'middle',
                bottom: 10,
                left: 'center',
                icon: "circle",
                // 图例文字的样式
    /*            textStyle: {
                    color: '#010101',
                    fontSize: 16
                },*/
                data: ['住宿美食','住宿', '美食']
            },
            series : [
                {
                    name: '类型',
                    type: 'pie',
                    radius : '65%',
                    center: ['50%', '50%'],
                    selectedMode: 'single',
                    data:[
                        {
                            value:diningAndAccomCount,
                            name: '住宿美食',
                            itemStyle: {color: '#07AFF7'},
                            label: {
                                normal: {
                                    show: true,
                                    color:'#101010',
                                    fontSize: 13,
                                    // formatter: '{b}: {d}%'
                                    formatter : ' {b}:\n{d}% ',
                                }
                            },
                        },
                        {value:accomCount,
                            name: '住宿',
                            itemStyle: {color: '#5ACEDB'},
                            label:{
                                normal:{
                                    show:true,
                                    color:'#101010',
                                    fontSize: 13,
                                    formatter : ' {b}:\n{d}% ',
                                }
                            }
                        },
                        {value:diningCount,
                            name: '美食',
                            itemStyle: {color: '#12DB57'},
                            label:{
                                normal:{
                                    show: true,
                                    color:'#101010',
                                    fontSize: 13,
                                    formatter : ' {b}:\n{d}% ',
                                }
                            }
                        }
                    ],

                }
            ]
        };
        myChart.setOption(option);
    })


    $(function () {
        var myLineChart = echarts.init(document.getElementById('first-line-chart'));

        var accomsResult =$("#accomsResult").val().split(",")
        var accomsRes = new Array();
        for (var i = 0 ; i < accomsResult.length; i ++){
            accomsRes.push(accomsResult[i])
        }

        var diningResult =$("#diningResult").val().split(",")
        var diningRes = new Array();
        for (var i = 0 ; i < diningResult.length; i ++){
            diningRes.push(diningResult[i])
        }

        var accomAndDiningResult =$("#accomAndDiningResult").val().split(",")
        var accomAndDiningRes = new Array();
        for (var i = 0 ; i < accomAndDiningResult.length; i ++){
            accomAndDiningRes.push(accomAndDiningResult[i])
        }


        var  option = {
            title: {
                text: ''
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['住宿美食','住宿','美食'],
                icon:'line',
                bottom: 0,
                left: 'center',
            },
            grid: {
                left: '1%',
                right: '4%',
                bottom: '8%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
            },
            yAxis: {
                type: 'value'
            },
            series: [

                {
                    name:'住宿美食',
                    type:'line',
                    stack: '总量',
                    // 设置为实心点
                    symbol:'circle',
                    itemStyle : {
                        normal : {
                            color: '#F83438',
                            lineStyle:{
                                color:'#F83438',
                            }
                        }
                    },
                    data: accomAndDiningRes
                },
                {
                    name:'住宿',
                    type:'line',
                    stack: '总量',
                    // 设置为实心点
                    symbol:'circle',
                    itemStyle : {
                        normal : {
                            color: '#5ACEDB',
                            lineStyle:{
                                color:'#5ACEDB'
                            }
                        }
                    },
                    data: accomsRes
                },
                {
                    name:'美食',
                    type:'line',
                    stack: '总量',
                    // 设置为实心点
                    symbol:'circle',
                    itemStyle : {
                        normal : {
                            color: '#12DB57',
                            lineStyle:{
                                color:'#12DB57'
                            }
                        }
                    },
                    data: diningRes
                }
            ]
        };
        myLineChart.setOption(option);

    })

</script>
</html>